<template>

    <div class="container">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="账号登录" name="first">
                <div class="form-wrapper">
                    <div class="content-left">
                        <input type="text" name="username" placeholder="username" class="input-item" v-model="username">
                        <input type="password" name="password" placeholder="password" class="input-item"
                            v-model="password">
                        <div class="box">
                            <el-checkbox v-model="checked1" label="7天内自动登录" size="large" />
                            <div class="text-link">忘记密码</div>
                        </div>
                        <el-button type="primary" class="btn" @click="login" round>登录</el-button>
                    </div>
                    <div class="content-right">
                        <RouterLink to="/register">注册</RouterLink>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="验证码登录" name="second">
                <div class="form-wrapper">
                    <div class="content-left">
                        <input type="text" name="username" placeholder="请输入邮箱" class="input-item">
                        <input type="password" name="password" placeholder="请输入验证码" class="input-item">
                        <div class="box">
                            <el-checkbox v-model="checked1" label="7天内自动登录" size="large" />
                        </div>

                        <el-button type="primary" class="btn" @click="login" round>
                            <RouterLink to="/home">登录</RouterLink>
                        </el-button>
                    </div>
                    <div class="content-right">
                        立即注册
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
    <bottom></bottom>
</template>

<script lang="ts" setup>
import bottom from './bottom.vue';
import type { TabsPaneContext } from 'element-plus';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const checked1 = ref(true);
const activeName = ref('first');
const username = ref('111111');
const password = ref('123456');
const fixedUsername = '111111';
const fixedPassword = '123456';
const router = useRouter();
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event);
};
const login = () => {
    if (username.value === fixedUsername && password.value === fixedPassword) {
        router.push('/Home');
    } else {
        alert('用户名或密码错误！');
    }
};
</script>

<style>
.container {
    /* margin-right: 180px;*/
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    margin-left: 220px;
    background-image: linear-gradient(to right, #f56ca5, #6ec4ec);

}

.demo-tabs {
    width: 800px;
    height: 500px;
    padding: 20px;
    /* 根据需要添加内边距 */
    border-radius: 4px;
    /* 可选：添加圆角 */
}

.demo-tabs>.el-tabs__content {
    color: #6b778c;
    font-size: 32px;
    display: flex;
    text-align: center;
}

.form-wrapper {
    margin-top: 70px;
    margin-left: 50px;
    display: flex;
}

.content-right {
    margin-left: 100px;
}

.input-item {
    width: 300px;
    display: block;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    /* 添加边框 */
    padding: 10px;
    font-size: 15px;
    outline: none;
    border-radius: 4px;
    /* 添加圆角 */
}

.input-item::placeholder {
    text-transform: uppercase;
}

.rounded {
    border-radius: 20px;
    /* 更大的圆角 */
}

.box {
    display: flex;
}

.btn {
    text-align: center;
    padding: 10px;
    margin: 0 auto;
    width: 100%;
    margin-top: 40px;
    background-image: linear-gradient(to right, #6ec4ec, #f56ca5);
    color: #fff;
}

.box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.text-link {
    font-size: 14px;
    cursor: pointer;
}

.text-link:hover {
    text-decoration: underline;
}

.el-checkbox__label {
    font-size: 14px !important;
}
</style>